import Quill from 'quill'
const BlockEmbed = Quill.import('blots/block/embed') //插入块级元素
const list = [
    { type: 0, src: '/src/assets/divline/cutoff0.png' },
    { type: 1, src: '/src/assets/divline/cutoff1.png' },
    { type: 2, src: '/src/assets/divline/cutoff2.png' },
    { type: 3, src: '/src/assets/divline/cutoff3.png' },
    { type: 4, src: '/src/assets/divline/cutoff4.png' },
    { type: 5, src: '/src/assets/divline/cutoff5.png' },
]
const map = new Map()
list.forEach((item) => {
    map.set(item.type.toString(), item.src)
})

export const getCutOffSrc = (type: number) => {
    return map.get(type.toString()) || ''
}
export default class CutOffBlot extends BlockEmbed {
    static blotName = 'cut-off'
    static tagName = 'p'
    static className = 'cut-off'
    static create(value: { type: number | string }) {
        const pNode = super.create()
        const imageNode = document.createElement('img')
        imageNode.setAttribute('src', map.get(value.type.toString()) || '')

        pNode.setAttribute('contenteditable', 'false')
        pNode.setAttribute('data-type', value.type.toString())
        pNode.appendChild(imageNode)
        return pNode
    }
    // insert
    static value(node: HTMLElement) {
        if (node instanceof HTMLParagraphElement && node.className === 'cut-off') {
            const imageNode = node.querySelector('img')
            if (imageNode) {
                return {
                    type: node.getAttribute('data-type'),
                    url: imageNode.getAttribute('src'),
                }
            }
        }
        return {}
    }
    // attributes
    static formats(node: HTMLElement) {
        return {
            class: node.getAttribute('class'),
        }
    }
}